<!--  -->
<template>
  <div>
    <van-nav-bar title="修改姓名" right-text="完成" left-text="取消" 
      @click-left="$emit('close')" @click-right="onConfirm" />

    <div class="name-field-wrap"> 
    <van-field v-model="localName" rows="2" autosize type="textarea" maxlength="7" 
      placeholder="请输入姓名" show-word-limit />
    </div>
  </div>
</template>

<script>
import { updateUser } from '@/api/user'
export default {
  name:'UpateName',
  components: {},
  props:{
    value:{
      type:String,
      require:true
    },
    user:Object,
  },
  data () {
  return {
      localName:this.value
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
   async onConfirm(){
     this.$toast.loading({
       message:'保存中',
       forbidClick:true  //禁止背景点击
     })

      try {
        const { data } = await updateUser({
          "user_name": this.localName,
          "phonenumber": this.user.phonenumber,
          "department": this.user.department,
        })
        if (data.code != "200") {
          this.$message.fail('修改失败！' + data.msg);
        } else {
          this.$toast.success(data.msg);
          this.$emit('input',this.localName);
          //更新成功->修改父组件->关闭弹出层
          this.$emit('close');
        }

      } catch (error) {
        if (error) {
          this.$toast.fail('修改失败!');
        }
      }     
    }
  }
}

</script>
<style lang='less' scoped>
.name-field-wrap {
  padding: 10px;
}
</style>